import { ColumnsType } from 'antd/es/table'
import { observer } from 'mobx-react-lite'
import { Button, Image, Modal, Popconfirm, Table, message, Form, DatePicker, Input } from 'antd'
import React, { useState } from 'react'
import dayjs from 'dayjs'

import { storeAll } from '@/store'
import { notesType } from '@/store/notes'
import { formatUtc } from '@/utils'
import { deleteNotesRequest, searchRequest } from '@/apis/notes'
import { layout } from '@/utils/contants'
import { reviseNotesRequest } from '@/apis/notes'
import "./style.scss"

const { RangePicker } = DatePicker
const Notes: React.FC = () => {
	const [open, setOpen] = useState<boolean>(false)
	const [searchTime, setSearchTime] = useState<[dayjs.Dayjs | null, dayjs.Dayjs | null]>([null, null])
	const [form] = Form.useForm()
	const { notesStore: { getNotes, notes, setNotes } } = storeAll

	const columns: ColumnsType<notesType> = [
		{
			title: '车牌号',
			dataIndex: 'number'
		},
		{
			title: '图片',
			dataIndex: 'picture',
			render: (_, record) => {
				return <Image src={record.picture} className="tableAvater"></Image>
			}
		},
		{
			title: '进入时间',
			dataIndex: 'inTime',
			render: (_, record) => {
				return formatUtc(record.inTime)
			},
			defaultSortOrder: 'descend',
			sorter: (a, b) => a.inTime > b.inTime ? 1 : -1,
		},
		{
			title: '离开时间',
			dataIndex: 'outTime',
			render: (_, record) => {
				return record.outTime ? formatUtc(record.outTime) : '---'
			}
		},
		{
			title: '停车费',
			dataIndex: 'cost',
			render: (_, record) => {
				return record.cost || '---'
			}
		},
		{
			title: '操作',
			dataIndex: 'action',
			render: (_, record) => {
				return <>
					<Button type="primary" danger>
						<Popconfirm
							title="Delete the task"
							description="你确定要删除这条出入记录吗"
							okText="确定"
							cancelText="取消"
							onConfirm={() => deleteNotes(record.id)}
						>
							删除
						</Popconfirm>
					</Button>
					<Button type="primary" onClick={() => { opneModal(record) }}>
						修改
					</Button>
				</>
			}
		}
	]

	const deleteNotes = (id: number) => {
		deleteNotesRequest(id).then((res: any) => {
			message.success(res.message)
			getNotes()
		})
	}

	const opneModal = (record: any) => {
		record.time = [dayjs(record.inTime), record.outTime ? dayjs(record.outTime) : null]
		setOpen(true);
		form.setFieldsValue(record)
	}

	const reviserNotes = (value: any) => {
		value.inTime = value.time[0]
		value.outTime = value.time[1]
		reviseNotesRequest(value).then((res: any) => {
			message.success(res.message)
			setOpen(false)
			getNotes()
		})
	}
	const search = () => {
		const params = {
			inTime: '',
			outTime: ''
		}
		if (searchTime && searchTime[0]) {
			params.inTime = searchTime[0].format('YYYY-MM-DD HH:mm:ss')
		}
		if (searchTime && searchTime[1]) {
			params.outTime = searchTime[1].format('YYYY-MM-DD HH:mm:ss')
		}
		searchRequest(params).then((res: any) => {
			message.success(res.message)
			console.log(res.result);
			setNotes(res.result)
		})
	}

	return <div className="notesWrap">
		<div className="searchWrap">
			<RangePicker onChange={(date: any) => { console.log(date); setSearchTime(date) }} value={searchTime} showTime className="rangePicker" allowEmpty={[true, true]}></RangePicker>
			<Button type="primary" className="searchBt" onClick={search}>筛选范围</Button>
		</div>
		<Table dataSource={notes} columns={columns} rowKey={record => record.id} />
		<Modal title="修改出入记录" open={open} onCancel={() => { setOpen(false) }} footer={null}>
			<Form
				onFinish={reviserNotes}
				form={form}
				labelCol={{ span: 4 }}
				wrapperCol={{ span: 16 }}
			>
				<Form.Item name={['id']} label="id" style={{ display: "none" }}>
					<Input />
				</Form.Item>
				<Form.Item name={['time']} label="出入时间" rules={[{ required: true, message: '请输入出入时间' }]}>
					<RangePicker showTime style={{ width: '100%' }} allowEmpty={[false, true]} />
				</Form.Item>
				<Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
					<Button type="primary" htmlType="submit">
						修改
					</Button>
				</Form.Item>
			</Form>
		</Modal>
	</div>
}

export default observer(Notes)